<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../flexible/flexible.debug.js"></script>
    <script src="../flexible/flexible_css.debug.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/xiang.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
</head>

<body>
    <header class="header">
        <span class="left"><a href = "../html/zhuang.html"><img src="../img/f_4.png"></a></span>
        <span class="center">商品详情</span>
        <span class="right"></span>
    </header>
    <div class="swiper-container abc">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../img/i_banner.png">
            </div>
            <div class="swiper-slide">
                <img src="../img/i_banner.png">
            </div>
            <div class="swiper-slide">
                <img src="../img/i_banner.png">
            </div>
            <div class="swiper-slide">
                <img src="../img/i_banner.png">
            </div>
            <div class="swiper-slide">
                <img src="../img/i_banner.png">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="title">
        <p class="p1">专供一玫瑰粉色佳人A级</p>
        <p class="p2">专供价：<span>￥20.50</span></p>
    </div>
    <div class="coloumn">
        <p>急速售后<span>享受优先售后权利</span></p>
    </div>
    <div class="server">
        <p>单位：20支/扎</p>
    </div>
    <div class="main">
        <p class="p1">描述：</p>
        <p class="p2">描述这里是描述的文本，后台可配置。</p>
        <p class="p3">描述这里是描述的文本，后台可配置这里可描述的文字。</p>
        <img src="../img/i_2.png" alt="">
    </div>
    <div class="footer">
        <div class="left"><img src="../img/i_3.png" alt=""></div>
        <div class="right">+</div>
    </div>
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/swiper-3.4.2.jquery.min.js"></script>
    <script src="../js/swiper.animate1.0.2.min.js"></script>
    <script>
        var mySwiper = new Swiper('.abc', {
            onInit: function (swiper) {
                swiperAnimate(swiper);
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper);
            },
            pagination: '.swiper-pagination',
        })
    </script>
</body>

</html>